<template>
    <div class="container">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="120px" class="demo-ruleForm">
            <el-row>
				<div style="height:50px;">
					<div class="dis_in_bl font18">普惠金融</div>
					<el-button
					    type="primary"
					    class="clickAll dis_in_bl"
					    @click="add"

					>申请贷款</el-button>
				</div>
               <div class="applyLoans">
				   <div class="content">
					   <div>
						   <div class="dis_in_bl font18">申请贷款</div>
						   <div class="clickAll dis_in_bl" @click="goapplyLoansList">全部</div>
					   </div>
					   <el-table
					       :data="tableData"
					       border
					       style="margin-top:20px;"
					       ref="multipleTable"
					       header-cell-class-name="table-header"
					   >
					       <el-table-column prop="name" sortable label="申请人"></el-table-column>
					       <el-table-column prop="createTime" sortable label="申请时间"></el-table-column>
					       <el-table-column prop="amount" sortable label="申请金额"></el-table-column>
					       <el-table-column prop="bankName" sortable label="申请银行" width="200"></el-table-column>
					       <el-table-column sortable label="审核状态">
							   <template slot-scope="scope">
								   <div v-show="scope.row.status== 0">审核中</div>
								   <div v-show="scope.row.status== 1">已通过</div>
								   <div v-show="scope.row.status== -1">已拒绝</div>
							   </template>
						   </el-table-column>

					       <el-table-column label="操作" width="150" align="center">
					           <template slot-scope="scope">

					               <el-button
					                   type="text"

					                   @click="handleCheck(scope.$index, scope.row)"
					               >查看</el-button>
					           </template>
					       </el-table-column>
					   </el-table>
				   </div>
				   <div class="content">
					   <div class="dis_in_bl font18">消息提示</div>
					   <div class="clickAll dis_in_bl">全部</div>
						<div v-for="(item,index) in messageData" :key="index" style="display:flex;margin: 10px;">
							<span style="font-size:20px;width:80%;">{{item.content}}</span>
							<span style="height: 30px; overflow: display:inline-block;font-size:20px;">{{item.createtime}}</span>
							<!-- <span style="font-size:px;">{{item.content}}</span> -->
						</div>
				   </div>
			   </div>
                <div class="managementContent">
                	<div class="management">
						<div class="dis_in_bl font18">贷款管理</div>
						<div class="clickAll dis_in_bl" @click="gorepatmmentList">全部</div>
						<el-table
						    :data="tableData1"
						    border
						    style="margin-top:20px;"
						    ref="multipleTable"
						    header-cell-class-name="table-header"
						>
						    <el-table-column prop="name" sortable label="申请人"></el-table-column>
						    <el-table-column prop="createTime" sortable label="申请时间"></el-table-column>
						    <el-table-column prop="amount" sortable label="申请金额"></el-table-column>
						    <el-table-column prop="bankName" sortable label="放款银行"></el-table-column>
							<el-table-column prop="loanPeriod" sortable label="还款周期"></el-table-column>
							<el-table-column prop="surplusNum" sortable label="剩余周期"></el-table-column>
							<el-table-column prop="repaidAmount" sortable label="已还金额"></el-table-column>
							<el-table-column prop="surplusAmount" sortable label="剩余还款"></el-table-column>
							<el-table-column prop="repaymentTime" sortable label="还款时间"></el-table-column>
						    <el-table-column label="操作" width="150" align="center">
						        <template slot-scope="scope">
						          <el-button
						              type="text"

						              @click="repayment(scope.$index, scope.row)"
						          >还款</el-button>
						            <el-button
						                type="text"

						                @click="handlecheckrepayment(scope.$index, scope.row)"
						            >查看</el-button>
						        </template>
						    </el-table-column>
						</el-table>
					</div>

                </div>
            </el-row>
        </el-form>
    </div>
</template>

<script>
	import axios from "axios"
export default {
    data() {
        return {
			messageData:[],
            ruleForm: {
                files: '',
                type: '',
            },
            tableData:[],
            tableData1:[],
            rules: {

            }
        };
    },
    created() {

    },
    mounted() {
        this.init()//申请贷款列表
		this.init1()//贷款管理列表
		this.init2()//消息列表
    },
    destroyed: function () {

    },
    methods: {
		init2(){
			let data = {
				page:1
			}
			axios.post("https://bbgy.cpzsyun.com:82/api/control/message/findByList",data).then((res)=>{
				this.messageData = res.data.rows
				this.messageData = this.messageData.slice(0,5)
				for(let i = 0 ; i<this.messageData.length;i++){
					this.messageData[i].createtime = this.messageData[i].createtime.substring(0,10)
				}
			})
		},
		// 申请贷款列表
		init(){
			let data = {
				page:1
			}
			axios.post("https://bbgy.cpzsyun.com:82/api/control/loanInfo/findByList",data).then((res)=>{
			// axios.post("https://bbgy.cpzsyun.com:82/api/control/loanInfo/findByList",data).then((res)=>{
				this.tableData = res.data.rows
				this.tableData = this.tableData.slice(0,3)
				for(let i = 0 ; i<this.tableData.length;i++){
					this.tableData[i].createTime = this.tableData[i].createTime.substring(0,10)
				}
			})
		},
		// 贷款管理列表
		init1(){
			var companyId = localStorage.getItem("companyId")
			let data = {
				page:1,
				companyId:companyId
			}
			axios.post("https://bbgy.cpzsyun.com:82/api/control/loanInfo/findListRepay",data).then((res)=>{
			// axios.post("https://bbgy.cpzsyun.com:82/api/control/loanInfo/findListRepay",data).then((res)=>{
				this.tableData1 = res.data.rows
				this.tableData1 = this.tableData1.slice(0,3)
				for(let i = 0 ; i<this.tableData1.length;i++){
					this.tableData1[i].createTime = this.tableData1[i].createTime.substring(0,10)
				}
			})
		},
		//前往贷款管理的列表
		gorepatmmentList(){
			this.$router.push({
			    path: '/systemSetupFinance/applyLoansList',

			});
		},
		//前往申请贷款的列表
		goapplyLoansList(){
			this.$router.push({
			    path: '/systemSetupFinance/loansList',

			});
		},
		//还款
		repayment(index,row){
			this.$router.push({
			    path: '/systemSetupFinance/repayment',
			    query: {
			        id: row.id
			    }
			});
		},
		// 贷款管理查看
		handlecheckrepayment(index,row){
			this.$router.push({
			    path: '/systemSetupFinance/checkrepayment',
			    query: {
			        id: row.id
			    }
			});
		},
		handleCheck(index,row){
			this.$router.push({
			    path: '/systemSetupFinance/applyLoansCheck',
			    query: {
			        id: row.id
			    }
			});
		},
		add(){
			this.$router.push({
			    path: '/systemSetupFinance/applyLoans',
			});
		}
    }
};
</script>

<style lang="less" scoped>
	.applyLoans {
		display: flex;
		flex-wrap:nowrap ;
		justify-content: space-around;
		height:300px;
	}
	.content{
		margin: 20px;
		flex: 1;

		border: 1px solid #999;
		border-radius: 16px;
		overflow-y: hidden;
		padding: 10px;
	}
	.clickAll{
		float: right;
		cursor: pointer;
	}
	.font18{
		font-size: 18px;
		font-weight: 600;
	}
	.dis_in_bl{
		display: inline-block;
	}
	.management{
		margin: 40px 20px 20px 20px;
		flex: 1;
		border: 1px solid #999;
		border-radius: 16px;
		overflow-y: hidden;
		padding: 10px;
	}
	.managementContent{
		display: flex;
		flex-wrap:nowrap ;
		justify-content: space-around;
		height:400px;
	}
</style>
